
import { deleteBuild, deployContractList } from '@/api';
import useAppStore from '@ide/store';
import React, { useCallback, useEffect, useState } from 'react';
import { Button, Table } from 'tea-component';
import { Modal } from 'tea-component/lib/modal/Modal';

const { pageable, autotip, scrollable } = Table.addons;

const ManageComplieContract = React.forwardRef(() => {
  const { setting } = useAppStore();
  const [isLoading, setIsLoading] = useState(false);
  const [pageIndex, setPageIndex] = useState<number>(1);
  const [recordCount, setRecordCount] = useState<number>(0);
  const { editCompileContractsVisible, setEditCompileContractsVisible, getCompileContracts } = useAppStore();
  const [list, setList] = useState<any[]>([]);
  const getList = useCallback(async () => {
    setIsLoading(true);
    const res = await deployContractList({
      pageSize: 10,
      page: pageIndex
    });
    setIsLoading(false);
    if (res.data?.deployList?.length) {
      setRecordCount(res.data?.total || 0);
      setList(res.data?.deployList || []);
    }else{
      setRecordCount(0)
      setList([]);
    }
  }, [pageIndex]);
  const deleteContract = useCallback((contractName:string) => {
    deleteBuild({
      contractName
    }).then(() => {
      getList();
      getCompileContracts()
    });
  }, []);
  useEffect(() => {
    if (editCompileContractsVisible) {
      getList();
    }
  }, [editCompileContractsVisible]);
  return <Modal
    maskClosable
    visible={editCompileContractsVisible}
    caption="已编译合约列表"
    onClose={() => setEditCompileContractsVisible(false)}
    className={`${setting.theme}_model`}
    size={600}
    maskStyle={{
      backgroundColor: 'rgba(0,0,0,0.2)'
    }}
  >
    <Modal.Body>
      <div className='dialog-table'>
        <div className='dialog-sub-t'>此处展示已编译的合约，删除后选择合约（已编译）下拉选项处将不再展示。</div>
        <Table
          columns={[{
            key: 'buildTime',
            header: '时间'
          },
          {
            key: 'name',
            header: '合约名称'
          },
          {
            key: 'ip',
            header: '操作',
            width: 80,
            render: ({ name }) => (<>{
              <Button type="link" onClick={() => deleteContract(name)}>删除</Button>
            }</>)
          }]}
          records={list}
          recordKey="name"
          addons={[pageable(
            {
              onPagingChange: ({ pageIndex }) => {
                setPageIndex(pageIndex || 0);
              },
              pageSizeVisible: false,
              pageIndex,
              recordCount,
              pageIndexVisible: false,
              endJumpVisible: false
            }),
            autotip({
              emptyText: '暂无数据',
              isLoading
            }),
            scrollable({
              maxHeight:480,
              minHeight:480
            })
          ]
          }
        />
      </div>
    </Modal.Body>
    {/* <Modal.Footer>
      <Button type="primary" onClick={handleSubmit(submit)}>
        确定
      </Button>
      <Button type="weak" onClick={onClose}>
        取消
      </Button>
    </Modal.Footer> */}
  </Modal>;
});
ManageComplieContract.displayName = 'ManageComplieContract';

export default ManageComplieContract;
